<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>Aurora - 资源工具</title>
  <style>
    #components-layout-demo-top-side-2 .logo {
      width: 120px;
      height: 31px;
      background: rgba(255, 255, 255, 0.2);
      margin: 16px 28px 16px 0;
      float: left;
    }
  </style>
  <link href="http://cdn.staticfile.org/ant-design-vue/1.5.3/antd.min.css" rel="stylesheet">
</head>
<body>
  <script src="http://cdn.staticfile.org/vue/2.6.11/vue.js"></script>
  <script src="http://cdn.staticfile.org/ant-design-vue/1.5.3/antd.min.js"></script>
  <div id="root" style="min-height: 100%; height: 100%">
    <a-layout id="components-layout-demo-top-side-2" style="min-height: -webkit-fill-available;">
      <topnav current-url="/aurora/toolbox"> </topnav>

      <a-layout style="padding: 15px 24px 24px;max-width: 1200px;min-width: 800px;margin: auto;width: 100%;">
        <!-- 最上面一排工具选择 -->
        <a-layout-content :style="{ background: '#fff', padding: '24px', margin: 0, minHeight: '280px' }">
          <div>
            <a-row type="flex" :gutter="20">
              <a-col v-for="(menu,index) in menus" :key="menu.id">
                <a-button :style="{height:'99px'}" :block="true" @click="btnMenu(index)">
                  <div>
                    <a-avatar :src="'/aurora/toolbox/'+menu.icon" shape="square" :size="54"></a-avatar>
                  </div>
                  {{ menu.name }}
                </a-button>
              </a-col>
            </a-row>
          </div>
          <br/>
          <a-card :title="menus[current].name" :bordered="false" style="margin-top: -10px;" v-if="current >= 0">
            <span slot="extra">{{version}}</span>
            <!-- 你的内容 -->
            <template v-if="menus[current].id == 'common'">
              <a-button type="primary" :loading='commonRescanLoading' @click="btnCommonRescan">刷新场景列表</a-button>
            </template>

            <!-- 弹幕 -->
            <template v-else-if="menus[current].id == 'danmaku'">
              <a-collapse v-if="danmaku.data.length != 0"> <!-- delete v-model="activeKey" -->
                <a-collapse-panel :key="item.id"
                    :header="'B 站直播间 '+item.roomId+' - '+(item.status == 'RUNNING' ? '连接中' : item.status)"
                    v-for="item in danmaku.data">
                  <i>#{{item.id}}&emsp;&emsp;&emsp;上次操作 : {{item.lastOpTime}}</i>
                  <br/><br/>
                  <a-row :gutter="16">
                    <a-col :span="6">
                      <a-statistic title="房间号" :value="item.roomId" style="margin-right: 50px" group-separator="">
                        <template #suffix>
                          <span>({{item.realRoomId}})</span>
                        </template>
                      </a-statistic>
                    </a-col>
                    <a-col :span="4">
                      <a-statistic title="主播 UID" :value="item.uid" class="demo-class" group-separator=""></a-statistic>
                    </a-col>
                    <a-col :span="4">
                      <a-button type="link" size="large" @click="btnDanmukuRecord(item)">查看弹幕</a-button>
                    </a-col>
                  </a-row>
                </a-collapse-panel>
              </a-collapse>
              <!-- 抽屉 -->
              <a-drawer title="查看弹幕" placement="right" :visible="danmaku.showRecords"
                  width="640" @close="btnDanmukuRecordClose" :closable="true">
                <pre>{{ danmaku.records }}</pre>
              </a-drawer>
              <a-empty v-if="danmaku.data.length == 0" description="白茫茫一片真干净"></a-empty>
            </template>

            <!-- 计时器 -->
            <template v-else-if="menus[current].id == 'timer'">
              <span>还没整</span>
            </template>

            <!-- 存档 -->
            <template v-else-if="menus[current].id == 'save'">
              <a-row :gutter="24">
                <a-col :span="6">
                  <a-input placeholder="存档来源" allow-clear @change="onSaveSearchChange" v-model.trim="save.search"></a-input>
                  <br/><br/>
                  <a-timeline mode="right">
                    <a-timeline-item v-for="s in save.timeline" :key="s.name" style="padding-bottom:10px;"
                        :color="s.load ? (s.count > 0 ? 'blue' : 'gray') : 'red'">
                      <a-icon slot="dot" type="clock-circle-o" style="font-size: 16px;" v-if="!s.load"></a-icon>
                      {{s.name}} {{ s.load ? '('+s.count+')' : '' }}
                      <a-button type="link" @click="onSaveSeriesChange(s.name)">查看</a-button>
                    </a-timeline-item>
                  </a-timeline>
                </a-col>
                <a-col :span="17" :offset="1">
                  <a-list v-if="save.archives.length != 0" item-layout="horizontal" :data-source="save.archives">
                    <a-list-item slot="renderItem" slot-scope="item, index">
                      <a slot="actions" @click="btnSaveShowRecord(item)" >详情</a>
                      <a slot="actions" :href="saveDownloadLink(item.id)" target="_blank">下载</a>
                      <a-list-item-meta :description="'#'+item.id" >
                        <span slot="title">{{ item.name }}</span>
                        <a-avatar icon="snippets" slot="avatar"
                            style="background-color:#33A;vertical-align:middle;margin-top:6px;"></a-avatar>
                      </a-list-item-meta>
                    </a-list-item>
                  </a-list>
                  <a-empty v-if="save.archives.length==0 && save.series!=''"
                      style="margin-top:80px;"
                      :description="save.series+' 下面没有存档'"></a-empty>
                </a-col>
              </a-row>
              <!-- 抽屉 -->
              <a-drawer title="查看存档版本历史" placement="right" :visible="save.showArchiveRecord"
                  width="640" @close="btnSaveRecordClose" :closable="true">
                <a-table :columns="save.archiveColumns" :data-source="save.archiveRecords">
                  <span slot="action" slot-scope="record">
                    <a :href="saveDownloadLink(save.currentArchive.id, record.version)">下载</a>
                  </span>
                </a-table>
              </a-drawer>
            </template>

            <!-- 你的内容 END -->
          </a-card>
        </a-layout-content>
      </a-layout>
    </a-layout>
  </div>
</body>
</html>